<template>
	<navigator :url="`/pages/classList/classList?id=${item._id}&name=${item.name}`" class="item-wrapper" v-if="!isMore">
		<image class="pic" :src="item.picurl"></image>
		<view class="name">{{item.name}}</view>
		<view class="tag">{{compareTimestamp(item.updateTime)}}前更新</view>
	</navigator>
	<navigator url="/pages/class/class" open-type="switchTab" class="item-wrapper more" v-if="isMore">
		<image class="pic" src="../../common/image/more.jpg"></image>
		<view class="more-font">
			<uni-icons type="more-filled" size="30" color="#fff"></uni-icons>
			<text class="font">更多</text>
		</view>
	</navigator>
</template>

<script setup>
import {compareTimestamp} from '@/utils/common.js'
defineProps({
	isMore:{
		type:Boolean,
		default:false
	},
	item:{
		type:Object,
	}
})
</script>

<style lang="scss" scoped>
.item-wrapper{
	width: 220rpx;
	height: 340rpx;
	border-radius: 10rpx;
	overflow: hidden;
	position: relative;
	.pic{
		width: 100%;
		height: 100%;
	}
	.name{
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0.2);
		color: #fff;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 70rpx;
		backdrop-filter: blur(20px);
	}
	.tag{
		position: absolute;
		left: 0;
		top: 0;
		color: #fff;
		background: #c06a42;
		border-radius: 0 0 20rpx 0;
		font-size: 24rpx;
		padding: 6rpx 14rpx;
	}
}
.more{
	.more-font{
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(20px);
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.font{
			font-size: 28rpx;
			color: #fff;
		}
	}
}
</style>